<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script>
        $(function () {
            var param = getParams();
            //进入游记页面,查询对该游记的评论
            $.get("/travelComments/"+param.id,function (data) {
                console.log(data);
                $("#userComments").renderValues(data,{getHref:function (item,value) {
                        var url=$(item).data("href");
                        $(item).attr("href",url+value)
                    }});
            });
            $.post("/travels/"+param.id);
            $.get("/travels/" + param.id, function (data) {
                $(".travels").renderValues(data);
                //相关数据设置到模态框
                $("#commentFrom input[name='travel.id']").val(data.id);
                $("#commentFrom input[name='author.id']").val(data.author.id);
                $("#commentBtn").click(function () {
                    if(sessionStorage.getItem("user")){
                        $("#myModal").modal("show");
                    }else{
                        alert("请先登录才能评论!")
                    }

                })
            })
            //为发表评论按钮绑定点击事件
            $("#submitBtn").click(function () {
                $("#commentFrom").ajaxSubmit(function (data) {
                    if (data.succeed) {
                        window.location.reload();
                    }

                    //点击后再查询一次
                    $.get("/travelComments/"+ param.id,function (data) {
                        console.log(data);
                        $("#userComments").renderValues(data,{getHref:function (item,value) {
                                var url=$(item).data("href");
                                $(item).attr("href",url+value)
                            }})
                    })
                });

            })

        })

    </script>


</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <input id="authorId" name="author.id" type="hidden" render-value="author.id"/>
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="lastUpdateTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span></span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span class="travelNum">0 </span>篇游记
                    <span class="num">0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName">和朋友</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up fa-2x" id="likeBtn" style="color: darkorange"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o fa-2x" id="commentBtn" style="color: blue"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o fa-2x" id="collectBtn" style="color: gold"></i>
        </div>
    </div>
</div>

    <div id="userComments">
        <span>用户评论:<span style="background-color: #00bbd3" id="msg"></span></span>
        <br/>
        <br/>
        <ul id="comments">
            <div render-loop="list">
                <li class="comments">
                    <div class="com_top">
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                    <span class="photo">
                        <img class="rounded-circle" width="17%" render-src="list.user.headImgUrl">
                    </span>
                        </a>
                        <!--<img class="rounded-circle" width="17%" render-src="headImgUrl">-->
                        <span class="name" render-html="list.user.nickName"></span>
                    </div>

                    <div class="com_content" render-html="list.content">

                    </div>

                    <div class="com_bottom">
                        <span class="time">评论时间:</span>
                        <span class="time" render-html="list.createTime"></span>
                    </span>
                    </div>
                    <br/>
                </li>
            </div>

        </ul>
    </div>



<!-- 游记评论模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                <div style="text-align: center">
                    <p> 因为你足迹更加精彩!</p>
                </div>

                <div>
                    <form action="/travelComments" method="post" id="commentFrom" style="text-align: center">
                        <div style="text-align: center">
                            <textarea id="commentContent" name="content"
                                  style="width: 90%;height: 100px;font-size: 30px;text-align: left;border: solid 1px black"
                                  class="form-control-lg" placeholder="说点什么吧">
                            </textarea>
                        </div>

                        <!-- <input type="hidden" name="userId" id="userId" value="">-->
                        <input type="hidden" name="travel.id" >
                        <input type="hidden" name="author.id" >

                    </form>
                </div>
                <br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="submitBtn">
                    提交评论
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var param = getParams();
    var user = JSON.parse(sessionStorage.getItem("user"));
    var authorId;
    $.get("/travels/" + param.id, function (data) {
        $(".travels").renderValues(data);
        authorId = data.author.id;

        //查询作者用户的游记数
        $.get("travels/content/"+authorId,function (data) {
            $(".travelNum").html(data);
        });
        //显示是否关注
        function queryRelation() {
            if (user) {
                if ((user.id != authorId)) {
                    console.log(authorId);
                    $.get("/users/relations/" + user.id, {"attentionId": authorId}, function (data) {
                        var btnValue = "取消关注";
                        if (data) {
                            btnValue = "关注";
                        }
                        state = data;
                        $("#followBtn").html(btnValue);
                    });
                }else{
                    $("#followBtn").css("display", "none");
                }
            }
        }

        queryRelation();

        $("#followBtn").click(function () {
            if (!user) {
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: "关注功能需要登录,是否马上登录?<br/>5秒中后自动跳转到登陆页面,可点击取消...",
                    autoClose: 5000,
                    overlayShow: true,
                    buttonStyle: "stacked",
                    buttonTextConfirm: "确定",
                    buttonTextCancel: "取消",
                    onClickConfirmBtn: function () {
                        window.parent.location.href = "/login.html";
                    }
                });
            }
            if (state) {
                $.post("/users/relations", {"fansId": user.id, "attentionId": authorId}, function (data) {
                    queryRelation();
                    queryNum();
                });
            } else {
                if (authorId) {
                    $.ajax({
                        method: "delete",
                        url: "/users/relations/" + user.id + "?attentionId=" + authorId,
                        success: function (data) {
                            queryRelation();
                            queryNum();
                        }
                    })

                }
            }

        });
        //查询关注数
        function queryNum() {
            $.get("/users/relations/" + authorId, {"type": "map"}, function (data) {
                console.log(data);
                $(".num").html(data.fansNum);

            });
        }

        queryNum();
    });


    //获取是否点赞或者是收藏

    $.get("praises/travels/" + param.id, {state: 1}, function (data) {
        if (data) {
            $("#likeBtn").removeClass("fa fa-thumbs-o-up fa-2x").addClass("fa fa-thumbs-up fa-2x");
        }
    });
    $.get("praises/travels/" + param.id, {state: 2}, function (data) {
        if (data) {
            $("#collectBtn").removeClass("fa fa-star-o fa-2x").addClass("fa fa-star fa-2x");
        }
    });
    $(".flex-fill #collectBtn").click(function () {
        if (user == null) {
            $(document).dialog({
                type: 'notice',
                infoText: '请登录了再点赞*_*!',
                autoClose: 1000,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
            return;
        } else {
            $.get("praises/travels/" + param.id, {state: 2}, function (data) {
                if (data) {
                    $.ajax({
                        url: '/praises/travels/' + param.id + '/' + user.id + '/2',
                        method: 'delete',
                        success: function () {
                            $("#collectBtn").removeClass("fa fa-star fa-2x").addClass("fa fa-star-o fa-2x");
                        }
                    });
                } else {
                    if(authorId){
                        var obj = {
                            state: 2,
                            travelId: param.id,
                            userId: user.id,
                            authorId: authorId
                        };
                        $.post("/praises/travels", obj, function (data) {

                            $("#collectBtn").removeClass("fa fa-star-o fa-2x").addClass("fa fa-star fa-2x");

                        });
                    }
                }
            });
        }
    });
    $(".flex-fill #likeBtn").click(function () {
        if (user == null) {
            $(document).dialog({
                type: 'notice',
                infoText: '请登录了再点赞*_*!',
                autoClose: 1000,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
            return;
        } else {
            $.get("praises/travels/" + param.id, {state: 1}, function (data) {
                if (data) {
                    $.ajax({
                        url: '/praises/travels/' + param.id + '/' + user.id + '/1',
                        method: 'delete',
                        success: function () {
                            $("#likeBtn").removeClass("fa fa-thumbs-up").addClass("fa fa-thumbs-o-up");
                        }
                    });
                } else {
                    if(authorId){
                        var obj = {
                            state: 1,
                            travelId: param.id,
                            userId: user.id,
                            authorId: authorId
                        };
                        $.post("/praises/travels", obj, function (data) {
                            $("#likeBtn").removeClass("fa fa-thumbs-o-up").addClass("fa fa-thumbs-up");

                        });
                    }
                }
            });
        }
    });



</script>
</html>